<template>
	<view class="app">
		<view class="top"><view class="title center">专家会在4小时内回复您的消息</view></view>

		<view class="center detai">
			<view class="tech-info column center">
				<view class="imageurlll"><image :src="content.img"></image></view>
				<view>{{ content.name }}</view>
			</view>
			<view class="info center">
				<view class="info-wz">{{ content.introduce }}</view>
			</view>
		</view>

		<view class="below">
			<view class="zxbg">咨询表格</view>

			<view class="ling">
				<view class="name">姓名</view>
				<input v-model="formData.name" class="sname" maxlength="15" type="text" placeholder="请输入姓名" />
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">联系电话</view>
				<input v-model="formData.phone" class="sname" maxlength="15" type="number" placeholder="请输入联系电话" />
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">年龄</view>
				<input v-model="formData.age" class="sname" maxlength="15" type="number" placeholder="请输入年龄" />
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">性别</view>
				<radio-group class="radio-group" @change="genderChange">
					<label class="label">
						<radio value="1" color="#643A92" style="transform: scale(0.7);" />
						男
					</label>
					<label class="label">
						<radio value="2" color="#643A92" style="transform: scale(0.7);" />
						女
					</label>
				</radio-group>
				<view class="ling-x"></view>
			</view>

			<view class="ling">
				<view class="name">是否已婚</view>
				<radio-group class="radio-group" @change="marriageChange">
					<label class="label">
						<radio value="2" color="#643A92" style="transform: scale(0.7);" />
						未婚
					</label>
					<label class="label">
						<radio value="1" color="#643A92" style="transform: scale(0.7);" />
						已婚
					</label>
				</radio-group>
				<view class="ling-x"></view>
			</view>

			<view v-for="(item, index) in topic" :key="index" class="ling">
				<view v-if="item.state == 1">
					<view class="name">{{ item.subject }}（单选）</view>
					<radio-group v-if="item.state == 1" class="radio-group column" @change="symChange">
						<label @click="dx(index)" v-for="(nav, i) in item.choice" :key="i" class="labell">
							<radio :value="nav" color="#643A92" style="transform: scale(0.7);" />
							{{ nav }}
						</label>
					</radio-group>
				</view>

				<view v-else>
					<view class="name">{{ item.subject }}（多选）</view>
					<view class="zj">
						<evan-checkbox-group ref="cGroup" @change="onGroupChange()" v-model="color4">
							<view @click="ddx(index)" style="margin-top: 15rpx;" class="evan-checkbox-show__group-item" v-for="(itemh, indexh) in item.choice" :key="indexh">
								<evan-checkbox :titleStyle="{ 'font-size': '15px' }" :iconSize="13" primaryColor="#643A92" :label="itemh">{{ itemh }}</evan-checkbox>
							</view>
						</evan-checkbox-group>
					</view>
				</view>
				<view class="ling-x"></view>
			</view>
		</view>
		<view class="center bott-bb"><button :loading="loading" :disabled="loading" class="input-content" type="primary" @click="submitHandler">提交</button></view>
	</view>
</template>

<script>
import api from '@/api/doctor.js';
export default {
	data() {
		return {
			id: null, //专家id
			content: '', // 内容
			topic: '', //题目
			formData: {
				//表单数据
				name: '',
				phone: '',
				age: '',
				gender: 1, // 1男 2女
				marriage: 2 //1是2否
			},
			loading: false,
			dataAll: [
				{
					subject: [],
					problem: [],
					chose: []
				}
			],
			tem: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.getDetails();
	},
	methods: {
		// 查询专家详情方法
		async getDetails() {
			let _this = this;
			const isoj = {
				id: _this.id
			};
			const { data } = await api.getInfo(isoj);
			_this.content = data[0];
			_this.topic = data[1];
			// console.log(111)
			// console.log(data[1])
			// console.log(222)
			data[1].forEach((item, index) => {
				if (index < 1) {
					console.log(index);
					// console.log(item.subject)
					_this.dataAll[index].subject = item.subject;
					_this.dataAll[index].problem = item.choice;
					if (item.state == 1) {
						_this.dataAll[index].chose = item.choice[0];
					} else {
						_this.dataAll[index].chose = [];
					}
				} else {
					if (item.state == 1) {
						var choseaa = item.choice[0];
					} else {
						var choseaa = [];
					}
					let newArr = {
						subject: item.subject,
						problem: item.choice,
						chose: choseaa
					};
					_this.dataAll.push(newArr);
				}
			});

			console.log('aaa');
			console.log(_this.dataAll);
			console.log('bbb');
		},

		genderChange(e) {
			this.formData.gender = Number.parseInt(e.detail.value);
			// console.log(typeof this.formData.type)
		},
		marriageChange(e) {
			this.formData.marriage = Number.parseInt(e.detail.value);
			// console.log(typeof this.formData.type)
		},
		dx(index) {
			console.log(index);
			this.dataAll[index].chose = [this.tem];
			
		},
		ddx(index) {
			console.log(index);
			this.dataAll[index].chose = this.tem;
			
			// this.dataAll[index].chose =  this.tem.split()
		},
		symChange(e) {
			// this.formData.sym = Number.parseInt(e.detail.value)
			console.log(e.detail.value);
			this.tem = e.detail.value;
		},

		onGroupChange(e) {
			console.log(e);
			this.tem = e;
		},

		// 提交反馈意见
		async submitHandler() {
			if (!this.formData.name) {
				this.$util.msg('请输入姓名');
				return;
			}
			if (!this.formData.name || this.formData.name.trim().length < 2) {
				this.$util.msg('姓名至少输入2个字');
				return;
			}

			if (!this.formData.phone) {
				this.$util.msg('请输入电话');
				return;
			}
			if (!this.$util.checkStr(this.formData.phone, 'mobile')) {
				this.$util.msg('电话格式错误');
				return;
			}

			if (this.formData.age && !this.$util.checkStr(this.formData.age, 'age')) {
				this.$util.msg('年龄格式错误');
				return;
			}

			this.loading = true;
			uni.showLoading({
				title: '提交中',
				mask: true
			});
			const openid = uni.getStorageSync('openid');
			console.log(typeof this.dataAll);
			var arrlet ={
				name: this.formData.name,
				phone: this.formData.phone,
				age: this.formData.age,
				gender: this.formData.gender,
				marriage: this.formData.marriage,
				data:this.dataAll
			}
			// console.log(arrlet)
			var dataArr = JSON.stringify(arrlet);
			
			
			const res = await api.submitFrom({id: this.id,openid: openid,data:dataArr});
			
			this.loading = false;
			uni.hideLoading();
			if (!res.code == 1) {
				this.$util.msg(res.message);
				return;
			}
			if (res.code == -1) {
				uni.showModal({
					content: '请登录！',
					showCancel: false,
					success: () => {
						this.navTo(`/pages/auth/login`);
					}
				});
			}
			

			uni.showModal({
				content: '提交成功！',
				showCancel: false,
				success: () => {
					this.navTo(`/pages/message/dialogue?id=${this.id}`);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.u-checkbox {
	margin-top: 10rpx !important;
}

.app {
	.top {
		display: flex;
		justify-content: center;
		padding-top: 30rpx;
		width: 750rpx;
		height: 380rpx;
		border-radius: 0 0 40rpx 40rpx;
		background: linear-gradient(0deg, #663b94 0%, #a461c5 50%, #a464c3 100%);

		.title {
			padding-top: 20rpx;
			width: 400rpx;
			height: 25rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
		}
	}

	.detai {
		.tech-info {
			z-index: 100;
			position: absolute;
			top: 100rpx;

			.imageurlll {
				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
			}
		}

		.info {
			width: 690rpx;
			height: 300rpx;
			background: #ffffff;
			// background: #007AFF;
			box-shadow: 0px 2rpx 31rpx 1rpx rgba(227, 225, 229, 0.4);
			border-radius: 20rpx;
			position: absolute;
			top: 150rpx;
			padding-top: 130rpx;

			.info-wz {
				width: 630rpx;
				height: 104rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
	}

	.below {
		margin-top: 180rpx;
		margin-left: 30rpx;

		.zxbg {
			width: 144rpx;
			height: 36rpx;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
			margin-bottom: 50rpx;
		}

		.ling {
			margin-bottom: 20rpx;

			.zj {
				margin-top: 15rpx;
			}

			.name {
				margin-bottom: 25rpx;
				width: 600rpx;
				height: 24rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.sname {
				margin-top: 20rpx;
				width: 195rpx;
				height: 28rpx;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
			}

			.ling-x {
				margin-top: 15rpx;
				width: 690rpx;
				height: 10px;
				border-top: solid #eeeeee 1px;
			}

			.radio-group {
				margin-top: 20rpx;
			}

			.label {
				padding-right: 120rpx;
			}

			.labell {
				margin-bottom: 10rpx;
			}
		}
	}

	.bott-bb {
		background: linear-gradient(90deg, #bb73d5, #643a92);

		.input-content {
			width: 750rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #bb73d5, #643a92);
		}
	}
}
</style>
